<template>
  <div class="mine">
    <div class="header">
      <div class="back" style="height:180px"></div>
      <div class="card">
        <p class="name">{{userInfo.username}}</p>
        <p class="flag">可可喜欢家，家喜欢干净</p>
        <div class="flex">
          <div class="flex_item">
            <p class="word">已完成</p>
            <p class="number">123</p>
          </div>
          <div class="flex_item">
            <p class="word">待服务</p>
            <p class="number">2</p>
          </div>
          <div class="flex_item">
            <p class="word">已支付</p>
            <p class="number">110</p>
          </div>
          <div class="flex_item">
            <p class="word">余额</p>
            <p class="number">{{(userInfo.balance).toFixed(2)}}</p>
          </div>
        </div>
      </div>
      <div class="JPG">
        <img
          :src="userInfo.userFace != '' ? userInfo.userFace :photourl"
          width="100%"
          height="100%"
        />
      </div>
    </div>

    <div class="table">
      <van-nav-bar left-text="实名认证" right-text=">" @click-left="onClick" @click-right="onClick" />
      <van-nav-bar left-text="提现" right-text=">" @click-left="getmoney" @click-right="getmoney" />
      <!--弹出框，赋予chargeBtn事件-->
      <van-dialog v-model="show" title="提现" show-cancel-button @confirm="sumbitMoney">
        <!--输入框-->
        <van-field
          v-model="number1"
          rows="1"
          autosize
          label="金额"
          type="number"
          placeholder="请输入金额"
        />
      </van-dialog>
      <van-nav-bar left-text="收益信息" right-text=">" @click-left="toget" @click-right="toget" />
      <van-nav-bar left-text="个人信息" right-text=">" @click-left="myself" @click-right="myself" />
    </div>
    <div class="down" style="margin: 16px;">
      <van-button
        color="linear-gradient(90deg, #bf73ff, #7579ff)"
        round
        size="large"
        @click="offline"
      >退出登录</van-button>
    </div>
  </div>
</template>

<script>
// 引入辅助函数
import { mapActions, mapState } from "vuex";
import { get, post } from "@/http/axios";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      number1: "",

      show: false,
      photourl:
        "http://121.199.29.84:8888/group1/M00/00/50/rBD-SWDixYOASajcAAAteDVkRqQ289.jpg",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    async sumbitMoney() {
      let data = {
        money: this.number1,
        applyType: "提现",
        userId: this.userInfo.id,
      };
      //console.log(data);
      await post("/accountApply/submitAccountApply", data);
      this.show = false;
    },
    onClick() {
      this.$router.push({ path: "/manager/shiming" });
    },
    offline() {
      this.$router.push({ path: "/login" });
    },
    getmoney() {
      this.show = true;
    },
    chargeBtn(action, done) {
      //确认or取消
      if (action === "cancel") {
        //取消按钮
        done();
      } else if (action === "confirm") {
        //确定按钮
        // this.$refs["money_Form"].validate(async (valid) => {
        //   if (valid) {
        //     if (res.status == 200) {
        //       this.$message({
        //         message: res.message,
        //         type: "success",
        //       });
        //       this.dialogClose();
        //     }
        //   } else {
        //     return false;
        //   }
        // });
        Toast.success("提交成功");
        this.show = false;
      }
      this.number1 = "";
      done();
    },
    toget() {
      this.$router.push({ path: "/manager/profit" });
    },
    myself() {
      this.$router.push({ path: "/manager/myself" });
    },
    //得到余额
    async getbalance() {},
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
div.back {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
::v-deep .van-nav-bar__text {
  color: darkgray;
}

::v-deep .van-nav-bar__content {
  margin-left: 20px;
  margin-top: 10px;
}
div.table {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 100px;
}
::v-deep .van-button {
  margin-top: 50px;
}
.flex {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}
.flex_item {
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
}

.card {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}

.JPG {
  margin-top: -95px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.JPG img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.name {
  width: 50%;
  margin: 0 auto;
  margin-top: 3.5em;
  text-align: center;
}
.flag {
  color: #7579ff;
  width: 50%;
  margin: 0 auto;
  margin-top: 0.5em;
  text-align: center;
  font-size: 12px;
}
.word {
  font-size: 11px;
  color: #999;
  margin: 0;
}
.number {
  font-size: 22px;
  margin-top: 2px;
  color: #7579ff;
}
</style>